<template>
  <div class="mb20">
    <el-table
      v-loading="loading"
      :data="tabledata.list"
      :highlight-current-row = 'false'
      style="width: 100%">
      <el-table-column
        label="商品信息"
        width='200'
      >
        <template scope="scope">
          <p>商品编码：{{scope.row.productId}}</p>
          <p>
            <span
              class='sku-info-cur'
              @mouseover = 'enter($event, scope.row)'
              @mouseout = 'leave($event)'
            >商品名称：{{scope.row.title}}</span>
          </p>
        </template>
      </el-table-column>
<!--       <el-table-column
        label="供应商"
        v-if="curTableLabel.indexOf('供应商') > -1">
        <template scope="scope">
          <div v-for="(item,index) in scope.row.providerNames">{{item}}</div>
        </template>
      </el-table-column> -->
      <el-table-column
        label="剩余库存"
        v-if="curTableLabel.indexOf('剩余库存') > -1"
        prop='stock'>
      </el-table-column>
      <el-table-column
        label="积分策略"
        width='150'
        v-if="curTableLabel.indexOf('积分策略') > -1">
        <template scope='scope'>
          <div
            class='integral-link'
            v-if='scope.row.pointStrategyVOs && scope.row.pointStrategyVOs.length >0'
          >
            <template v-for='item in scope.row.pointStrategyVOs'>
              <div v-if='item.status == 2' @click='goIntegralDetail(item.id)'>
                <span>生效中</span><br>
                <span>1积分={{item.unitPointValue}}元</span><br>
                <span>最高抵{{item.maxRatio * 100}}%</span>
              </div>
              <div v-if='item.status == 1' @click='goIntegralDetail(item.id)'>
                <span>待生效</span><br>
                <span>1积分={{item.unitPointValue}}元</span><br>
                <span>最高抵{{item.maxRatio * 100}}%</span>
              </div>
            </template>
          </div>
          <div v-else>
            暂无策略
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="优惠活动"
        v-if="curTableLabel.indexOf('优惠活动') > -1">
        <template scope='scope'>
          <div
            v-if='scope.row.priceStrategyVOs && scope.row.priceStrategyVOs.length>0'
          >
             <template v-for='item in scope.row.priceStrategyVOs' >
               <el-tag type="success" v-if='item.displayStatus == 3' style='cursor:pointer'>
                <span @click='goActivity(item.priceStrategyId)'>
                  <span>生效中</span>
                  <span>{{item.name}}</span>
                </span>
              </el-tag>
              <el-tag type="warning" v-if='item.displayStatus == 2' style='cursor:pointer'>
                <span @click='goActivity(item.priceStrategyId)'>
                  <span>待生效</span>
                  <span>{{item.name}}</span>
                </span>
              </el-tag>
             </template>
          </div>
          <div v-else>
            暂无活动
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="上架时间"
        width='240'
        v-if="curTableLabel.indexOf('上架时间') > -1">
        <template scope='scope'>
            <p v-if='scope.row.onlineTime'>{{scope.row.onlineTime | dateformat}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="开售时间"
        width='250'
        v-if="curTableLabel.indexOf('开售时间') > -1">
        <template scope='scope'>
            <p v-if='scope.row.saleTime '>{{scope.row.saleTime  | dateformat}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="下架时间"
        width='250'
        v-if="curTableLabel.indexOf('下架时间') > -1">
        <template scope='scope'>
            <p v-if='scope.row.offlineTime'>{{scope.row.offlineTime | dateformat}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width='250'
        v-if="curTableLabel.indexOf('创建时间') > -1">
        <template scope='scope'>
            <p v-if='scope.row.createTime'>{{scope.row.createTime | dateformat}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="当前状态"
        v-if="curTableLabel.indexOf('当前状态') > -1"
      >
        <template scope='scope'>
            <p>{{scope.row.status  | productStatus}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        v-if="curTableLabel.indexOf('操作') > -1"
        width='120'
      >
        <template scope='scope'>
          <el-popover
            ref="popover"
            placement="bottom-end"
            width="200"
            trigger="click"
          >
            <p style="text-align:center">
              <template v-for='item in btnGroup(scope.row.status )'>
                <el-button v-if="item === 'productup'" size="small" @click="productup(scope.row)">上架</el-button>
                <el-button v-if="item === 'productdown'" size="small" @click="productdown(scope.row)">下架</el-button>
                <el-button v-if="item === 'edit'" size="small" @click='productedit(scope.row)'>编辑</el-button>
                <el-button v-if="item === 'del'" size="small" @click="productdelete(scope.row)">删除</el-button>
                <el-button v-if="item === 'productTimingUp'" size="small" @click="productTimingUp(scope.row)">定时上架</el-button>
                <el-button v-if="item === 'productTimingDown'" size="small" @click="productTimingDown(scope.row)">定时下架</el-button>
              </template>
            </p>
          </el-popover>
          <el-button v-popover:popover>操作</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="改变列表展示项" v-model="dialogFormVisible">
      <el-checkbox-group v-model="center">
        <el-checkbox :label="item" v-for='item in tableLabel'></el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="changeCol">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <div
      v-if='hoverLayer.show' class="hoverLayer"
      :style="{ left: hoverLayer.left+'px', top: hoverLayer.top + 'px' }"
      @mouseover='hoverLayerEvter($event)'
      @mouseleave='leave($event)'
    >

    </div> -->
    <div
      class="el-popover hoverLayer"
      id='hoverLayer'
      v-show='hoverLayer.show'
      style="transform-origin: left center 0px;"
      :style="{ left: hoverLayer.left+'px', top: hoverLayer.top + 'px' }"
      x-placement="top"
      @mouseover='hoverLayerEvter($event)'
      @mouseleave='leave($event)'
    >
      <p class="hoverLayer-title">{{hoverLayer.title}}</p>
      <el-table :data="hoverLayer.tabledata" width="100%" border>
        <el-table-column property="skuProperty" label="sku名称"></el-table-column>
        <el-table-column property="stock" label="剩余库存"></el-table-column>
        <el-table-column label="常售价">
          <template scope='scope'>
            {{scope.row.regularPrice | price}}
          </template>
        </el-table-column>
        <el-table-column label="促销价">
          <template scope='scope' >
            <span v-if='scope.row.promotionPrice !== null'>
              {{scope.row.promotionPrice | price}}
            </span>
            <span v-else>
              无
            </span>
          </template>
        </el-table-column>
        <el-table-column property="promotionPrice" label="供应商">
          <template scope='scope' >
            {{hoverLayer.providerNames.join('、')}}
          </template>
        </el-table-column>
      </el-table>
      <!-- <div x-arrow="" class="popper__arrow" style="top: 112.5px;"></div> -->
    </div>

  </div>
</template>
<script>
  export default {
    props: ['tabledata', 'loading'],
    data () {
      return {
        dialogFormVisible: false,
        tableLabel: ['剩余库存', '积分策略', '优惠活动', '上架时间', '开售时间', '下架时间', '创建时间', '当前状态', '操作'],
        curTableLabel: ['剩余库存', '积分策略', '优惠活动', '上架时间', '当前状态', '操作'],
        center: [],
        statusBtnGroup: {
          // 尚未上架
          '0': ['edit', 'del', 'productup', 'productTimingUp'],
          // 出售中
          '1': ['edit', 'productdown', 'productTimingDown'],
          // 下架
          '2': ['edit', 'productup', 'productTimingUp'],
          // 即将开售
          '3': ['edit', 'productdown', 'productTimingDown'],
          // 定时上架
          '4': ['edit', 'productup', 'productTimingUp', 'productdown', 'productTimingDown']
        },
        hoverLayer: {
          show: false,
          title: '',
          providerNames: [],
          tabledata: [],
          top: 0,
          left: 0
        }
      }
    },
    methods: {
      callChangeCol () {
        this.center = this.curTableLabel
        this.dialogFormVisible = true
      },
      cancel () {
        this.dialogFormVisible = false
      },
      changeCol () {
        this.curTableLabel = this.center
        this.dialogFormVisible = false
      },
      productup (params) {
        this.$productup({
          productid: params.productId,
          name: params.title,
          success: () => {
            this.$emit('update')
          }
        })
      },
      productdown (params) {
        this.$productdown({
          productid: params.productId,
          name: params.title,
          success: () => {
            this.$emit('update')
          }
        })
      },
      productTimingUp (params) {
        this.$productTimingUp({
          productid: params.productId,
          name: params.title,
          success: () => {
            this.$emit('update')
          }
        })
      },
      productTimingDown (params) {
        this.$productTimingDown({
          productid: params.productId,
          name: params.title,
          success: () => {
            this.$emit('update')
          }
        })
      },
      productdelete (params) {
        this.$productDelete({
          productid: params.productId,
          name: params.title,
          success: () => {
            this.$emit('update')
          }
        })
      },
      productedit (params) {
        this.$router.push({
          path: '/goods/editGoods',
          query: {
            productId: params.productId
          }
        })
      },
      btnGroup (val) {
        return this.statusBtnGroup[val]
      },
      test (e, params) {
        let target = e.target
        this.hoverLayer.left = target.getBoundingClientRect().left + document.documentElement.scrollLeft
        this.hoverLayer.top = target.getBoundingClientRect().top + document.documentElement.scrollTop - 200
        this.hoverLayer.show = true
      },
      hoverLayerEvter () {
        this.hoverLayer.show = true
      },
      enter (e, row) {
        let target = e.target
        this.hoverLayer.tabledata = row.skuList
        this.hoverLayer.title = row.productId + '    ' + row.title
        this.hoverLayer.providerNames = row.providerNames
        this.hoverLayer.show = true
        this.$nextTick(() => {
          let layer = document.getElementById('hoverLayer')
          this.hoverLayer.left = target.getBoundingClientRect().left + document.documentElement.scrollLeft
          this.hoverLayer.top = target.getBoundingClientRect().top + document.body.scrollTop - layer.scrollHeight
        })
      },
      leave (e) {
        this.hoverLayer.show = false
      },
      goIntegralDetail (id) {
        this.$router.push({
          path: '/operational/integralEdit',
          query: {
            type: 'edit',
            id: id
          }
        })
      },
      goActivity (id) {
        this.$router.push({
          path: '/operational/editLJCampaign',
          query: {
            type: 'edit',
            priceStrategyId: id
          }
        })
      }
    }
  }
</script>
<style lang='less'>
  .sku_list{
    font-size: 14px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
    span{
      display: inline-block;
    }
    .sku-label-name{
      /*width: 300px;*/
      width: 26em;
    }
    .sku-label-stock{
      width:70px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .sku-label-price{
      width:100px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      margin-left: 10px;
    }
  }
  .sku-info-cur{
    cursor: pointer;
  }
  .hoverLayer {
    background: #fff;
    width:700px;
    position: absolute;
    z-index: 1001;
    top: 0;
    left: 0;
  }
  .hoverLayer-title {
    font-size: 16px;
  }
  .integral-link{
    > div {
      cursor: pointer;
    }
  }
</style>
